<template>
  <div class="header">
    {{title}}
  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  data () {
    return {
      title: ''
    }
  },
  created () {
    const toName = this.$route.name
    this.setTitle(toName)
  },
  methods: {
    setTitle (toName) {
      switch (toName) {
        case 'MyHome':
          this.title = '首页'
          break
        case 'Consult':
          this.title = '咨询'
          break
        case 'Customer':
          this.title = '客户'
          break
        case 'MySelf':
          this.title = '我的'
          break
        default:
          this.title = '首页'
          break
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='stylus' scoped>
.header
  height .9rem
  line-height .9rem
  text-align center
  background #0B8BFF
  font-family: PingFangSC-Regular;
  font-size: 26px;
  color: #FFFFFF;
</style>
